<template>
	<view class="container">
		<!-- 头部 -->
		<uni-nav-bar backgroundColor="rgba(255,22,69,0)" :fixed="true" :statusBar="true" :border="false">
				<block v-slot:left>
					<uni-icons @click="back" class="back" color="#000" type="back" size="25"></uni-icons>
				</block>
		</uni-nav-bar>
		<view class="content">
			<view class="titlesss	">
				购买成功
			</view>
			<view class="boxsss">
				<view class="left" @click="backs">
					返回首页
				</view>
				<view class="right" @click="$goURl('/pages/order/order?state=2')">
					订单中心
				</view>
			</view>

			<view class="listMdd">
				<view class="like">
					猜你喜欢
				</view>
				<view class="goodsbox" v-for="(items,index) in data.list" :key="index" @click="$goURl(`/pages/commodity/details?id=${items.ID}`)">
					<image class="goodsImg" :src="items.img" mode=""></image>
					<view class="goodsShop">
						<text class="name textsl2">{{items.name}}</text>
						<view class="box">
							<text>￥{{formatNumber(items.price+items.coupon,2)}}</text>
							<!-- <image src="http://pubuimg.cqguanjie.cn/chat/16945909171691" mode="aspectFill"></image> -->
						</view>
						<view class="price" style="font-size: 12px;">
							<text>现金：{{$toFiexd(items.price,2)}}</text>
							<text style="margin-left: 5px;" v-if="items.coupon>0" >zkfc：{{$toFiexd(items.coupon,2)}}</text>
						</view>
						<!-- <view class="boxs">
							<text class="market" v-if="items.market">￥{{items.market}}</text>
							<view class="markets">
								<text>已售</text>
								<text>{{items.sales+items.virtually_sales}}</text>
								<text>件</text>
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<empty v-if="data.list.length==0"></empty>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom,onBackPress} from "@dcloudio/uni-app";
	const { proxy } = getCurrentInstance();
	const data = reactive({
		list:[]
	})
	onLoad((option)=>{
				recommend()
	})
	onShow(()=>{

	})

	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})
	function formatNumber(num) {
	    // 检查数字是否为整数
	    if (Number.isInteger(num)) {
	        return num; // 如果是整数，直接返回
	    } else {
	        return num.toFixed(2); // 如果有小数点，返回两位小数
	    }
	}
	function back(){
		uni.navigateBack({
			delta:2
		})
	}
	function backs(){
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
	function recommend (){
		proxy.$request({
			url: `api/recommend/`,
			method: 'get',
			success(res) {
				data.list=res.data || []
			}
		})
	}
</script>

<style lang="scss" scoped>

	.container{
		.content{
			
			.titlesss{
				text-align: center;
				padding: 30upx;
					color:  #000;
			}
			.boxsss{
				display: flex;
				justify-content: space-around;
				padding: 30upx;
				.left,.right{
					border: 1upx solid #000;
					padding:10upx 20upx;
					border-radius: 40upx;
					color:  #000;
				}
			}
			.like{
				text-align: center;
				padding:0 30upx 30upx 30upx;
				width: 100%;
			}
			.listMdd{
				padding: 30upx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				background-color: #f5f5f5;
				border-radius: 30upx 30upx 0 0 ;
				.goodsbox{
					width: 48%;
					background-color: #fff;
					border-radius: 10px;
					margin-bottom: 30upx;
					.goodsImg{
						width: 100%;
						height: 186px;
						border-radius: 10px;
					}
					.goodsShop{
						padding: $padding;
						.name{
							font-size: 15px;
							font-weight: 700;
						}
						.box{
							margin: 4px 0;
							text{
								color: $color1;
								font-size:17px;
								margin-right: 10px;
								font-weight: 700;
							}
							image{
								width: 33px;
								height: 14px;
							}
						}
						.price{
							display: flex;
							align-items: center;
							text{
								color: #f4391c;
								font-weight: 700;
							}
							image{
								width: 30px;
								height: 14px;
								margin-left: 10upx;
							}
						}
						.boxs{
							display: flex;
							justify-content: space-between;
							.market{
								color: #999999;
								text-decoration: line-through;
								font-size: 13px;
							}
							.markets{
								color: #999999;
								font-size: 13px;
							}
						}
					}
					
				}
			}
		}
	}
</style>
<style>
	page{
		background: linear-gradient( 180deg, #FFE6C4 0%, #F7F7F7 100%);
	}
</style>
